<template>
    <view class="">
        <view class="box">
            <canvas canvas-id="canvasIds" :class="cavansHeigth?'canvasClass1':'canvasClass2'"></canvas>
            <view class="buttons" v-if="downsType">
                <view @click="onImg">
                    保存
                </view>
                <view class="" @click="clearImg">
                    取消
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props: ['userPho', 'userDetails', 'gooodsTo', 'gooodsTw', 'arrs',
            'goodsPo', 'goodsPw', 'imgType'
        ],
        data() {
            return {
                userDetailsCp: {
                    nickname: '用户名',
                    avatarUrl: ''
                },
                arrst: [],
                downsType: false,
                nickname: '用户名',
                userPhos: '',
                gooodsTos: '标题1',
                gooodsTws: '标题2',
                goodsPos: '价格1',
                goodsPws: '价格2',
                imgTypes: true,
                imglist23:0,
                cavansHeigth:true
            }
        },
        watch: {
            arrs(news, old) {
                this.arrst = this.arrst
            },
            imgType(news, old) {
                this.imgTypes = news
            },
            userDetails(news, old) {
                this.userDetailsCp = news
            },
            userPho(news, old) {
                this.userPhos = news
            },
            gooodsTo(news, old) {
                this.gooodsTos = news
            },
            gooodsTw(news, old) {
                this.gooodsTws = news
            },
            goodsPo(news, old) {
                this.goodsPos = news
            },
            goodsPw(news, old) {
                this.goodsPws = news
            }
        },
        mounted() {
            this.arrst = this.arrs
            this.imgTypes = this.imgType
            this.userDetailsCp = this.userDetails
            this.userPhos = this.userPho
            this.gooodsTos = this.gooodsTo
            this.gooodsTws = this.gooodsTw
            this.goodsPos = this.goodsPo
            this.goodsPws = this.goodsPw
            if(this.arrst.length>1&&this.imgTypes){
                this.cavansHeigth=true
                     console.log( this.cavansHeigth,'cavansHeigth')
            }else{
                  this.cavansHeigth=false
                     console.log( this.cavansHeigth,'cavansHeigth')
            }
            this.onHuabu()


        },
        methods: {
            //取消
            clearImg() {
                this.$emit('posterChange', false)
            },
            //保存海报
            onImg() {
                uni.showLoading({
                    title: "海报生成中"
                })
                uni.canvasToTempFilePath({
                    canvasId: 'canvasIds',
                    success: (res) => {
                        console.log(res.tempFilePath)
                        uni.saveImageToPhotosAlbum({
                            filePath: res.tempFilePath,
                            success: rest => {
                                wx.hideLoading()
                                uni.showToast({
                                    title: "图片保存成功，可以去分享啦~",
                                    duration: 2000,
                                    icon: "none",
                                    success: aaares => {
                                        this.$emit('posterChange', true)
                                    }
                                })
                            },
                            fail() {
                                uni.showToast({
                                    title: "保存失败，稍后再试",
                                    duration: 2000,
                                    icon: "none"
                                })
                                wx.hideLoading()
                            }
                        })
                    },
                    fail: (err) => {
                        uni.showToast({
                            title: "保存失败，稍后再试",
                            duration: 2000,
                            icon: "none"
                        })
                        console.log(err)
                    }
                }, this)
            },
            async onHuabu() {
                uni.showLoading({
                    title: "海报生成中..."
                })
                let that = this
                const ctx = uni.createCanvasContext('canvasIds', this)
                ctx.beginPath()
                if (!this.imgTypes&&this.arrst.length>1) {
                    ctx.rect(37, 0, 301, 480)
                } else if(this.arrst.length>1&&this.imgTypes){
                    ctx.rect(37, 0, 301, 600)
                }else if(this.arrst.length<2&&this.imgTypes){
                      ctx.rect(37, 0, 301, 480)
                }else if(this.arrst.length<2&&!this.imgTypes){
                      ctx.rect(37, 0, 301, 350)
                }
                ctx.setFillStyle('#FFFFFF')
                ctx.fill()
                ctx.setFillStyle('#000000')
                ctx.setFontSize(15)
                ctx.fillText(this.gooodsTos, 60, 27)
                ctx.setFontSize(15)
                ctx.fillText(this.gooodsTws, 60, 50)
                //第一张图-----------------------------------------------------------------------------------------------------------------------------------
                console.log(this.arrst[0].img)
                let imgs1 = await uni.downloadFile({
                    url: this.arrst[0].img
                })
                ctx.drawImage(imgs1[1].tempFilePath, 60, 60, 255, 255)
                //第二张图--------------------------------------------------------------------------------------------------------------------------
                if( this.arrst.length>1){
                    let imgs2 = await uni.downloadFile({
                        url: this.arrst[1].img
                    })
                    ctx.drawImage(imgs2[1].tempFilePath, 60, 325, 120, 120)
                    //第三张图----------------------------------------------------------------------------------------------------------------
                      if( this.arrst.length>1){
		                    let imgs3 = await uni.downloadFile({
		                        url: this.arrst[2].img
		                    })
		                    ctx.drawImage(imgs3[1].tempFilePath, 194, 325,  120, 120)
                      }
                }else{
                    this.imglist23=130
                }
                if (!this.imgTypes) {
                    ctx.draw()
                    this.downsType = true
                    uni.hideLoading()
                    return
                }
                ctx.beginPath()
                ctx.rect(175, 455-this.imglist23, 127, 30)
                ctx.setFillStyle('#FFD299')
                ctx.fill()
                ctx.arc(302, 470-this.imglist23, 15, 0, 2 * Math.PI)
                ctx.setFillStyle('#FFD299')
                ctx.fill()
                ctx.beginPath()
                ctx.rect(75, 455-this.imglist23, 103, 30)
                ctx.setFillStyle('#FF9000')
                ctx.fill()
                ctx.beginPath()
                ctx.arc(75, 470-this.imglist23, 15, 0, 2 * Math.PI)
                ctx.setFillStyle('#FF9000')
                ctx.fill()
                ctx.beginPath()
                ctx.arc(180, 470-this.imglist23, 15, 0, 2 * Math.PI)
                ctx.setFillStyle('#FF9000')
                ctx.fill()
                ctx.beginPath()
                ctx.setFontSize(13)
                ctx.setFillStyle('#FFFFFF');
                ctx.fillText('抢购价:￥', 70, 475-this.imglist23)
                ctx.beginPath()
                ctx.setFontSize(18)
                ctx.setFillStyle('#FFFFFF');
                ctx.fillText(this.goodsPos, 125, 477-this.imglist23)
                ctx.beginPath()
                ctx.setFontSize(13)
                ctx.setFillStyle('#FF5000');
                ctx.fillText('零售价:￥', 200, 475-this.imglist23)
                ctx.beginPath()
                ctx.setFontSize(13)
                ctx.setFillStyle('#FF5000');
                ctx.fillText(this.goodsPws, 255, 475-this.imglist23)
                //头像------------------------------------------------------------------------------
                uni.downloadFile({
                    url: this.userDetailsCp
                        .avatarUrl,
                    success: (res3) => {
                        ctx.save()
                        ctx.beginPath()
                        ctx.arc(80, 520-this.imglist23, 20, 0,
                            2 * Math.PI)
                        ctx.clip()
                        ctx.drawImage(res3
                            .tempFilePath,
                            60, 500-this.imglist23, 40, 40)
                        ctx.restore()
                        ctx.beginPath()
                        ctx.setFontSize(11)
                        ctx.setFillStyle(
                            '#333333');
                        ctx.fillText(this.userDetailsCp
                            .nickname,
                            100, 510-this.imglist23)
                        ctx.beginPath()
                        ctx.setFontSize(10)
                        ctx.fillText('为你推荐',
                            125, 528-this.imglist23)
                        //二维码------------------------------------------------------------------
                        uni.downloadFile({
                            url: this
                                .userPhos,
                            success: (
                                res4
                            ) => {
                                ctx.drawImage(
                                    res4
                                    .tempFilePath,
                                    175,
                                    500-this.imglist23,
                                    90,
                                    90
                                )
                                ctx.beginPath()
                                ctx.setFontSize(
                                    10
                                )
                                ctx.fillText(
                                    '长按识别',
                                    275,
                                    530-this.imglist23
                                )
                                ctx.beginPath()
                                ctx.fillText(
                                    '或扫码进入',
                                    275,
                                    545-this.imglist23
                                )
                                ctx.beginPath()
                                ctx.fillText(
                                    '购买物品',
                                    275,
                                    560-this.imglist23
                                )
                                ctx.draw()
                                this.downsType =
                                    true
                                uni.hideLoading()
                            }
                        })
                    }

                })




            }
        }
    }
</script>

<style scoped>
    .buttons {
        display: flex;
        justify-content: space-between;
        width: 600rpx;
        margin: 0 auto;
        margin-top: 60rpx;
        position: fixed;
        left: calc((100% - 600rpx)/2);
        bottom: 60rpx;
        color: #FFFFFF;
        text-align: center;

    }

    .buttons>view {
        line-height: 90rpx;
        width: 250rpx;
        border-radius: 50rpx;
    }

    .buttons>view:nth-child(1) {
        background: #FF6F00;
    }

    .buttons>view:nth-child(2) {
        background: #999999;
    }

    .box {
        z-index: 99999999;
        box-sizing: border-box;
        top: 0;
        left: 0;
        padding-top: 5%;
        position: fixed;
        margin: 0 auto;
        height: 100vh;
        width: 100%;
        background: rgba(0, 0, 0, 0.7);
    }

    .canvasClass1 {
        height: 1200rpx;
        width: 750rpx;
    }
    .canvasClass2 {
        height: 960rpx;
        width: 750rpx;
    }
</style>
